<template>
  <div class="app">
    <GoogleMapLayer ref="googleMapRef" :google-map-url="googleMapUrl" :enable-debug="enableDebug"
      @map-ready="onMapReady" @tile-loaded="onTileLoaded" @tile-error="onTileError" />

    <!-- 控制面板 -->
    <div class="control-panel">
      <h3>Google离线地图控制</h3>

      <div class="control-group">
        <label>地图URL:</label>
        <input v-model="googleMapUrl" type="text" placeholder="输入Google地图瓦片URL" class="url-input" />
      </div>

      <div class="control-group">
        <label>
          <input v-model="enableDebug" type="checkbox" />
          启用调试模式
        </label>
      </div>

      <div class="button-group">
        <button @click="flyToDali" class="control-button">
          飞行到大理
        </button>
        <button @click="flyToBeijing" class="control-button">
          飞行到北京
        </button>
        <button @click="flyToShanghai" class="control-button">
          飞行到上海
        </button>
        <button @click="refreshTiles" class="control-button">
          刷新瓦片
        </button>
      </div>

      <div class="control-group">
        <label>
          <input v-model="mapVisible" type="checkbox" @change="toggleMapVisibility" />
          显示地图
        </label>
      </div>

      <div class="info-section">
        <h4>当前位置信息</h4>
        <div v-if="currentPosition" class="position-info">
          <p>经度: {{ currentPosition.longitude.toFixed(6) }}°</p>
          <p>纬度: {{ currentPosition.latitude.toFixed(6) }}°</p>
          <p>高度: {{ (currentPosition.height / 1000).toFixed(2) }} km</p>
        </div>
        <button @click="updatePosition" class="control-button">
          更新位置
        </button>
      </div>

      <div class="status-section">
        <h4>状态信息</h4>
        <div class="status-item" :class="{ 'status-ready': mapReady }">
          地图状态: {{ mapReady ? '已就绪' : '加载中...' }}
        </div>
        <div class="status-item" v-if="lastTileInfo">
          {{ lastTileInfo }}
        </div>
        <div class="status-item error" v-if="lastError">
          错误: {{ lastError }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import GoogleMapLayer from './components/GoogleMapLayer.vue'

// 响应式数据
const googleMapRef = ref(null)
const googleMapUrl = ref('https://www.servicetrial.com/xq/yndl/terrain/dali_map/{z}/{x}/{y}.jpg')
const enableDebug = ref(true)
const mapVisible = ref(true)
const mapReady = ref(false)
const currentPosition = ref(null)
const lastTileInfo = ref('')
const lastError = ref('')

// 预定义的位置
const locations = {
  dali: { longitude: 100.2667, latitude: 25.6069, height: 50000 },
  beijing: { longitude: 116.4074, latitude: 39.9042, height: 50000 },
  shanghai: { longitude: 121.4737, latitude: 31.2304, height: 50000 }
}

// 事件处理函数
const onMapReady = (event) => {
  console.log('地图已就绪:', event)
  mapReady.value = true
  lastError.value = ''
  updatePosition()
}

const onTileLoaded = (event) => {
  console.log('瓦片加载完成:', event)
  lastTileInfo.value = event.message || '瓦片加载完成'
}

const onTileError = (error) => {
  console.error('瓦片加载错误:', error)
  lastError.value = error.message || '瓦片加载失败'
}

// 控制方法
const flyToDali = () => {
  if (googleMapRef.value) {
    const { longitude, latitude, height } = locations.dali
    googleMapRef.value.flyToPosition(longitude, latitude, height)
    setTimeout(updatePosition, 3000) // 飞行完成后更新位置
  }
}

const flyToBeijing = () => {
  if (googleMapRef.value) {
    const { longitude, latitude, height } = locations.beijing
    googleMapRef.value.flyToPosition(longitude, latitude, height)
    setTimeout(updatePosition, 3000)
  }
}

const flyToShanghai = () => {
  if (googleMapRef.value) {
    const { longitude, latitude, height } = locations.shanghai
    googleMapRef.value.flyToPosition(longitude, latitude, height)
    setTimeout(updatePosition, 3000)
  }
}

const refreshTiles = () => {
  if (googleMapRef.value) {
    googleMapRef.value.forceRefreshTiles()
  }
}

const toggleMapVisibility = () => {
  if (googleMapRef.value) {
    googleMapRef.value.setMapVisibility(mapVisible.value)
  }
}

const updatePosition = () => {
  if (googleMapRef.value) {
    const position = googleMapRef.value.getCurrentCameraPosition()
    if (position) {
      currentPosition.value = position
    }
  }
}

// 定时更新位置信息
onMounted(() => {
  setInterval(updatePosition, 5000) // 每5秒更新一次位置
})
</script>

<style scoped>
.app {
  position: relative;
  width: 100%;
  height: 100vh;
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(42, 42, 42, 0.95);
  padding: 20px;
  border-radius: 8px;
  color: white;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 320px;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}

.control-panel h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #4fc3f7;
  text-align: center;
}

.control-panel h4 {
  margin: 15px 0 8px 0;
  font-size: 14px;
  color: #81c784;
}

.control-group {
  margin-bottom: 15px;
}

.control-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #ccc;
}

.url-input {
  width: 100%;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #555;
  border-radius: 4px;
  color: white;
  font-size: 12px;
}

.url-input:focus {
  outline: none;
  border-color: #4fc3f7;
  background: rgba(255, 255, 255, 0.15);
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.control-button {
  padding: 10px 16px;
  background: linear-gradient(135deg, #42a5f5, #1e88e5);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.control-button:hover {
  background: linear-gradient(135deg, #1e88e5, #1565c0);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.control-button:active {
  transform: translateY(0);
}

.info-section,
.status-section {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.position-info p {
  margin: 4px 0;
  font-size: 12px;
  color: #e0e0e0;
}

.status-item {
  padding: 4px 0;
  font-size: 12px;
  color: #ccc;
}

.status-item.status-ready {
  color: #81c784;
}

.status-item.error {
  color: #f44336;
}

/* 复选框样式 */
input[type="checkbox"] {
  margin-right: 8px;
  accent-color: #4fc3f7;
}

/* 滚动条样式 */
.control-panel::-webkit-scrollbar {
  width: 6px;
}

.control-panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.control-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.control-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
</style>
